<template>
  <page-header-wrapper :title="false">
    <a-card class="content-card">
      <!-- 筛选条件 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="特点名称">
                <a-input v-model="queryParam.title" placeholder="特点名称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="特点所属">
                <a-tree-select
                  v-model="queryParam.menuId"
                  style="width: 100%; margin-bottom: 30px;"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="menuData"
                  placeholder="特点所属"
                  tree-default-expand-all
                  allowClear
                  :replaceFields="{
                    title: 'title',
                    key: 'id',
                    value: 'id'
                  }"
                >
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 6 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="getList">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 新增 -->
      <a-row style="margin-bottom:20px;">
        <a-button icon="plus" @click="handleAddClick" type="primary">新增</a-button>
      </a-row>
      <a-card class="content-card">
        <a-table 
          size="middle"
          :columns="columns" 
          :data-source="data" 
          :rowKey="r=> r.id" 
          :loading="loading"
          :scroll="{x: _width}"
        >
          <template slot="menuName" slot-scope="t">
            <a-tag>{{ t }}</a-tag>
          </template>
          <template slot="status" scope="t,r">
            <a-switch v-model="r.status" checked-children="开启" un-checked-children="冻结" @change="handleChange(r)" />
          </template>
          <template slot="action" slot-scope="r">
            <a @click="handleEditorClick(r)">修改</a>
            <a-divider type="vertical"></a-divider>
            <a-popconfirm
              title="您确定要删除吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="hanldeDelete(r)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-card>
      <!-- 新增 -->
      <CreateModal ref="createModal" :parent="this"></CreateModal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getMenuTree,deleteProductTrait,getProductTraitList,updateProductTrait } from '@/api/manage'
import { showMessage,toggleQuery } from '@/utils/mixins'
import CreateModal from './modules/CreateModal.vue'

export default {
  name: 'ProductTrait',
  mixins: [showMessage,toggleQuery],
  components: {
    CreateModal
  },
  data() {
    return {
      queryParam: {},
      columns: [
        { title: '特点名称', dataIndex: 'title', key: 'title',width: 250,},
        { title: '特点所属产品', dataIndex: 'menuName', key: 'menuName',scopedSlots: {customRender: 'menuName'}, width: 120},
        { title: '状态', scopedSlots: {customRender: 'status'},dataIndex:'status',key: 'status',width: 120},
        { title: '描述', dataIndex: 'description', key: 'description',width: 500,ellipsis: true},
        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center', fixed: 'right',width: 160 },
      ],
      data: [],
      menuData: [],
      loading: false
    }
  },
  computed: {
    _width() {
      return this.columns.reduce((x,y) => {return x+y.width},0)
    }
  },
  methods: {
    //修改状态
    handleChange(r) {
      console.log(status)
      updateProductTrait({
        id: r.id,
        status: r.status ? 1: 0
      }).then(res => {
        this.showMessage(res, this.getMenuList)
      })
    },
    // 删除列表
    hanldeDelete(r) {
      deleteProductTrait({id: r.id}).then(res => {
        this.showMessage(res,this.getList)
      })
    },
    // 新增
    handleAddClick(r) {
      this.$refs.createModal.form.parentId = r.id
      this.$refs.createModal.visible = true
      this.$refs.createModal.status = 1
    },
    // 修改
    handleEditorClick(r) {
      this.$refs.createModal.status = 2
      this.$refs.createModal.visible = true
      this.$refs.createModal.id = r.id
      const _form = this.$refs.createModal.form
      for(const key in _form) {
        _form[key] = r[key]
      }
      // 这是系列带图片的菜单
      if(r.bgImage) {
        this.$refs.createModal.fileList = [
          {
            name: r.title,
            uid: r.id,
            url: process.env.VUE_APP_API_ORIGIN+r.bgImage || ''
          }
        ]
      }
    },
    // 获取列表
    getMenuList() {
      getMenuTree().then(res => {
        if(res.code == '0') {
          this.menuData = this.dealMenuList( res.data )
        }
      })
    },
    dealMenuList(list) {
      list.forEach(item => {
        if(!item.children || !item.children.length) {
          delete item.children
        }else {
          this.dealMenuList(item.children)
        }
      })
      return list
    },
    getList() {
      this.loading = true
      getProductTraitList(this.queryParam).then(res => {
        this.loading = false
        if(res.code == '0') {
          this.data = this.dealData( res.data )
        }
      })
    },
    dealData(list) {
      list.forEach(item => {
        item.status = item.status == 1 ? true:false
      })
      return list
    }
  },
  mounted() {
    this.getMenuList()
    this.getList()
  }
}
</script>